<template>
    <div style="height:100%;">
        <navbar ref="orderFullScreen02" :showBackButton=false :showLeftArrow=false v-if="isMeInd == true && isMyPersonal == true" class="header-title-01">
            <template #left>
                <router-link tag="a" class="head-icon head-icon-left iconfont icon-youjian icon-color-white" :class="{'head-icon-badge' : (mesNum > 0)}" to="/messageNotification"></router-link>
            </template>
            <template #title><span style="color: #fff;">{{ $t('personal_my') }}</span></template>
            <template #right>
                <div style="padding-right: 10px">
                    <a @click="changeRoleModal(false)" class="head-icon iconfont icon-qiehuanyonghu icon-color-white" v-show="showCheckRole"></a>
                    <a @click="goSignInBtn" class="head-icon iconfont icon-gongzuojihua icon-color-white" v-show="isMeInd && isSignIn"></a>
                    <router-link tag="a" to="/installation"  class="head-icon iconfont icon-shezhi icon-color-white"></router-link>
                </div>
            </template>
        </navbar>
        <!--我的_滚动后-->
        <navbar ref="orderFullScreen" :title="$t('personal_my')" :showBackButton=false :showLeftArrow=false style="opacity: 0;background: #fff;border-bottom: 1px solid #ccc;" v-if="isMeInd == true && isMyPersonal == true" class="header-title-01">
            <template #left>
                <router-link tag="a" class="head-icon head-icon-left iconfont icon-youjian icon-color-black" :class="{'head-icon-badge' : (mesNum > 0)}" to="/messageNotification"></router-link>
            </template>
            <template #right>
                <div style="padding-right: 10px">
                    <a @click="changeRoleModal(false)" class="head-icon iconfont icon-qiehuanyonghu icon-color-black" v-show="showCheckRole"></a>
                    <a @click="goSignInBtn" class="head-icon iconfont icon-gongzuojihua icon-color-black" v-show="isMeInd && isSignIn"></a>
                    <router-link tag="a" to="/installation"  class="head-icon iconfont icon-shezhi icon-color-black"></router-link>
                </div>
            </template>
        </navbar>
        <navbar ref="orderFullScreen02" v-if="isMeInd == false || isMyPersonal == false" class="header-title-01">
            <template #title><span style="color: #fff;">{{ $t('personal_his') }}</span></template>
        </navbar>
        <!--TA的主页-->
        <navbar ref="orderFullScreen" v-if="isMeInd == false || isMyPersonal == false" class="header-title-01" style="opacity: 0;">
            <template #title><span style="color: #fff;">{{ $t('personal_his') }}</span></template>
        </navbar>
        <!--内容 start-->
        <div class="content"  :class= "{'another-content': isMeInd == false}" :style="{'padding-bottom' : isMeInd == false || isMyPersonal == false ? '0' : '56px'}">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;" :disabled="isDisabledPull">
                <div style="padding-bottom: 64px;" v-if="personal">
                    <div class="pic-module-01" v-if="personal">
                        <div class="pic-box">
                            <div class="module-box-04 clearfix">
                                <router-link tag="div" class="user-pic-02" :to="'/personalFile/' + encId" v-if="(isMeInd || !personal.snsSetting || (!personal.snsSetting.s_set_my_files || personal.snsSetting.s_set_my_files === 0 || (personal.snsSetting && personal.snsSetting.s_set_my_files === 1 && snsAttentionId === true))) || (isMeInd === false && !personal.snsSetting)">
                                    <head-img v-if="personal" :user-ent-id="personal.usrEntId" :head-img-url="appUrl + personal.userPoto" width="100%" height="100%"></head-img>
                                </router-link>
                                <div class="user-pic-02" v-if="isMeInd == false && ((personal.snsSetting && personal.snsSetting.s_set_my_files == 2) || (personal.snsSetting && personal.snsSetting.s_set_my_files == 1 && snsAttentionId == false))">
                                    <head-img v-if="personal" :user-ent-id="personal.usrEntId" :head-img-url="appUrl + personal.userPoto" width="100%" height="100%"></head-img>
                                </div><!--他的个人档案仅自己查看-->
                                <div style="float: left;width: 100%;display: flex">
                                    <div>
                                        <div class="clearfix">
                                            <router-link tag="p" class="title-03 word-clamp-2" style="float:left;" :to="'/personalFile/' + encId" v-if="(isMeInd || !personal.snsSetting || (!personal.snsSetting.s_set_my_files || personal.snsSetting.s_set_my_files === 0 || (personal.snsSetting && personal.snsSetting.s_set_my_files === 1 && snsAttentionId === true))) || (isMeInd === false && !personal.snsSetting)">{{personal.usrDisplayBil}}</router-link>
                                            <p class="title-03 word-clamp-2" style="float:left;" v-if="isMeInd == false && ((personal.snsSetting && personal.snsSetting.s_set_my_files == 2) || (personal.snsSetting && personal.snsSetting.s_set_my_files == 1 && snsAttentionId == false))">{{personal.usrDisplayBil}}</p><!--他的个人档案仅自己查看-->
                                        </div>
                                    <div @click="toMedalManagement">
                                        <p class="colorfff">
                                        <span v-if="personal.userGrade && personal.userGrade.ugrDisplayBil !== 'Unspecified'">
                                            ({{ personal.userGrade.ugrDisplayBil }})</span></p>
                                    <div  class="medal" v-if="this.medalList.length > 0">
                                        <div v-for="(item,index) in this.medalList" :key="index" class="medal-item">
                                        <img :src="appUrl + (item.activityImg || item.thumbnailImg)" alt=""/>
                                        </div>
                                    </div>
                                    <div v-else>
                                        <p class="colorfff" style="font-size: 12px">{{ $t("medal_unattained_medal") }}</p>
                                    </div>
                                    </div>
                                    </div>
                                    <sign-in-date @on-close="closeSignModal" :user-ent-id="userEntId" :is-show-pop.sync="goSignInPop"></sign-in-date>
                                </div>
                            </div>
                            <div class="module-list-04">
                                <ul class="clearfix">
                                    <!--正在关注-->
                                    <router-link tag="li" :to="'/attention/' + encId" v-if="(isMeInd || !personal.snsSetting || (!personal.snsSetting.s_set_my_follow || personal.snsSetting.s_set_my_follow === 0 || (personal.snsSetting && personal.snsSetting.s_set_my_follow === 1 && snsAttentionId === true))) || (isMeInd === false && !personal.snsSetting)">
                                        {{ $t("personal_attention") }}<span class="num-04">{{ personal.attentions }}</span>
                                    </router-link>
                                    <li style="color:rgba(255,255,255,0.3);" v-if="isMeInd === false && ((personal.snsSetting && personal.snsSetting.s_set_my_follow === 2) || (personal.snsSetting && personal.snsSetting.s_set_my_follow === 1 && snsAttentionId === false))">
                                        {{ $t("personal_attention") }}<span class="num-04" style="color:rgba(255,255,255,0.3);">{{ personal.attentions }}</span>
                                    </li>
                                    <i></i>
                                    <!--关注TA的/关注我的-->
                                    <router-link tag="li" :to="'/fans/' + encId" v-if="(isMeInd || !personal.snsSetting  || (!personal.snsSetting.s_set_my_fans || personal.snsSetting.s_set_my_fans == 0 || (personal.snsSetting && personal.snsSetting.s_set_my_fans == 1 && snsAttentionId == true))) || (isMeInd == false && !personal.snsSetting)">
                                        {{ isMeInd == false ? $t("personal_attention_ta") : $t("personal_attention_my_fances") }}<span class="num-04">{{ personal.fans }}</span>
                                    </router-link>
                                    <li style="color:rgba(255,255,255,0.3);" v-if="isMeInd == false && ((personal.snsSetting && personal.snsSetting.s_set_my_fans == 2) || (personal.snsSetting && personal.snsSetting.s_set_my_fans == 1 && snsAttentionId == false))">
                                        {{ $t("personal_attention_ta") }}<span class="num-04" style="color:rgba(255,255,255,0.3);">{{ personal.fans }}</span>
                                    </li><!--关注TA的-->
                                </ul>
                            </div>
                        </div>
                        <img src="./images/banner-b.png" width="100%" height="100%"/>
                        <div class="my-data-info" :style="{'height': isMeInd == true ? '160px' : '100px', 'bottom': isMeInd == true ? '-90px' : '-30px'}">
                            <div class="data-info-box">
                                <div class="data-info-grid clearfix" v-if="isMeInd == true">
                                    <div class="data-dbsx" @click="toPath('/todolist')">
                                        <i class="iconfont icon-daiban-" :style="this.$i18n.locale==='en'?'margin-right: 0px;':''"></i>
                                        <span>{{ $t('new-my-01') }}</span>
                                        <span class="data-badge" v-if="notCount > 0 && notCount < 100">{{notCount}}</span>
                                        <span class="data-badge" v-else-if="notCount > 99">99+</span>
                                    </div>
                                    <div @click="toPath('/learningProfile')" style="margin:0 3.5%">
                                        <i class="iconfont icon-xiangmuguanli" :style="this.$i18n.locale==='en'?'margin-right: 0px;':''"></i>
                                        <span>{{ $t('new-my-02') }}</span>
                                    </div>
                                    <div @click="toPath(`/totalPoints/${encId}`)">
                                        <i class="iconfont icon-jifen" :style="this.$i18n.locale==='en'?'margin-right: 0px;':''"></i>
                                        <span>{{ $t('new-my-03') }}</span>
                                    </div>
                                </div>
                                <div class="data-num clearfix">
                                    <div>
                                        <div>
                                            <div>{{ (userStudyInfo.timeTotal / 60 / 60).toFixed(1) }}</div>
                                            <div>{{ $t('new-my-04') }}</div>
                                        </div>
                                    </div>
                                    <div>
                                        <div>
                                            <div>{{ userStudyInfo.creditsTotal }}</div>
                                            <div>{{ $t('new-my-03') }}</div>
                                        </div>
                                    </div>
                                    <div>
                                        <div>
                                            <div>{{ userStudyInfo.completeTotal }}</div>
                                            <div>{{ $t('new-my-05') }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 排行榜 -->
                    <div class="rank-box"  v-if="isMeInd == true">
                    <span @click="goLearnMore" class="color999 vc rank-more">{{$t('more')}}<van-icon name="arrow" /></span>
                    <van-tabs v-model="activeRank" class="rank-list">
                        <van-tab :title="$t('rank_course_title')">
                        <div class="top-body">
                            <div class="top-info">
                                <div class="rank_head rank_index">{{$t('rank_index')}}</div>
                                <div class="rank_head rank_title">{{$t('course_name')}}</div>
                                <div class="rank_head rank_count">{{ $t('like') }}</div>
                            </div>
                            <div class="top-info" v-for="(item, index) in courseList" :key="index">
                                <div class="rank_index"><span :class="{ 'top':index < 3}">{{item.index}}</span></div>
                                <div class="rank_title">{{item.name}}</div>
                                <div class="rank_count">{{ item.likeCount }}</div>
                            </div>
                        </div>
                        </van-tab>
                        <van-tab :title="$t('rank_learning_title')" class="rank-list">
                        <div class="top-body">
                            <div class="top-info">
                                <div class="rank_head rank_index">{{$t('rank_index')}}</div>
                                <div class="rank_head rank_title">{{$t('personal_files_fullName')}}</div>
                                <div class="rank_head rank_count">{{ $t('personal_time_account') }}</div>
                            </div>
                            <div class="top-info" v-for="(item, index) in learnedList" :key="index">
                                <div class="rank_index"><span :class="{ 'top':index < 3}">{{item.index}}</span></div>
                                <div class="rank_title">{{item.user.usrDisplayBil}}</div>
                                <div class="rank_count">{{fmtHours(item.lsLearnDuration)}}</div>
                            </div>
                        </div>
                        </van-tab>
                    </van-tabs>
                    </div>
                    <!--其他页面入口 start-->
                    <ul class="module-list-05 white-bg bottom-shadow clearfix" :class="{'margin-top10' : isMeInd || !personal.snsSetting || ( !personal.snsSetting.s_set_my_collection  || personal.snsSetting.s_set_my_collection == 0 || (personal.snsSetting.s_set_my_collection == 1 && personal.snsSetting.snsAttention && snsAttentionId == true ))}">
                        <router-link tag="li" :to="`/myLearn/myCourses`" v-if="isMeInd == true">
                            <em class="iconfont icon-shoucang"></em>
                            <div class="title-01">
                                <span>{{ $t('new-my-11') }}</span><!--我的学习-->
                                <i class="arrow-right"></i>
                            </div>
                        </router-link>
                        <router-link tag="li" :to="`/myCertificate`" v-if="isMeInd == true">
                            <em class="iconfont icon-renwuguanli1"></em>
                            <div class="title-01">
                                <span>{{ $t('my_certificate') }}</span> <!--我的证书-->
                                <i class="arrow-right"></i>
                            </div>
                        </router-link>
                        <li @click="goToPkBorad" v-if="isMeInd == true">
                            <em class="iconfont icon-zhangdan"></em>
                            <div class="title-01">
                                <span>{{$t('new-my-13')}}</span>
                                <i class="arrow-right"></i>
                            </div>
                        </li>
                        <router-link tag="li" :to="'/myData/' + cwnEncrypt(personal.usrEntId)">
                            <em class="iconfont icon-xiangmu1"></em>
                            <div class="title-01">
                                <span>{{ isMeInd == true ? $t('personal_my_data') : $t('personal_his_data') }}</span><!--我的数据-->
                                <i class="arrow-right"></i>
                            </div>
                        </router-link>
                        <router-link tag="li" :to="'/offline/' + encId + '/completed'" v-if="isMeInd == true && $store.state.config.plus">
                            <em class="icon-offline-learning"></em>
                            <div class="title-01">
                                <span>{{ $t("personal_offline") }}</span><!--离线学习-->
                                <i class="arrow-right"></i>
                            </div>
                        </router-link>
                        <router-link tag="li" :to="'/collection/' + encId" v-if="isMeInd || (!personal.snsSetting || ( !personal.snsSetting.s_set_my_collection  || personal.snsSetting.s_set_my_collection == 0 || (personal.snsSetting.s_set_my_collection == 1 && personal.snsSetting.snsAttention && snsAttentionId == true )))">
                            <em class="iconfont icon-star"></em>
                            <div class="title-01"><!--'我的收藏'--><!--'TA的收藏'-->
                                <span>{{ isMeInd == true ? $t("personal_my_collection") : $t("personal_his_collection") }}</span>
                                <i class="arrow-right"></i>
                            </div>
                        </router-link>
                        <router-link tag="li" :to="`/myKnowledge/${cwnEncrypt(this.userEntId)}`" v-if="isMeInd == true">
                            <em class="iconfont icon-wendang"></em>
                            <div class="title-01">
                                <span>{{ $t("personal_knowledge") }}</span><!--我的知识-->
                                <i class="arrow-right"></i>
                            </div>
                        </router-link>
                        <router-link tag="li" :to="`/myBank/${this.userEntId}`" v-if="isMeInd == true">
                            <em class="iconfont icon-wendang"></em>
                            <div class="title-01">
                                <span>{{ $t("errorBank") }}</span><!--我的错题库-->
                                <i class="arrow-right"></i>
                            </div>
                        </router-link>
                        <router-link tag="li" to="/approval" v-if="countNum.hasStaff == true && isMeInd == true">
                            <em class="icon-approval"></em>
                            <div class="title-01">
                                <span>{{ $t("personal_apply") }}</span><!--报名审批-->
                                <i class="arrow-right"></i>
                                <i class="message-num">{{ countNum.approvalCount }}</i>
                            </div>
                        </router-link>
                    </ul>
                    <ul class="module-list-05 white-bg bottom-shadow clearfix" :class="{'margin-top10' : isMeInd || (!personal.snsSetting || (!personal.snsSetting.s_set_group || personal.snsSetting.s_set_group == 0 || (personal.snsSetting.s_set_group == 1 && personal.snsSetting.snsAttention && snsAttentionId == true )))}">
                        <router-link tag="li" :to="{path: '/publicVoting',query: {INITIATED:'INITIATED'}}" v-if="isMeInd == true">
                            <em class="iconfont icon-toupiao"></em>
                            <div class="title-01">
                                <span>{{ $t('new-my-12') }}</span>
                                <i class="arrow-right"></i>
                            </div>
                        </router-link>
                        <router-link tag="li" to="/evaluation?index=1" v-if="isMeInd == true">
                            <em class="iconfont icon-rili"></em>
                            <div class="title-01">
                                <span>{{ $t("personal_SVY") }}</span><!--我的调查问卷-->
                                <i class="arrow-right"></i>
                            </div>
                        </router-link>
                        <!--人脸信息-->
                        <router-link tag="li" :to="`/faceInfoPage`" v-if="isMeInd == true && facialSwitch">
                            <em class="iconfont icon-wendang"></em>
                            <div class="title-01">
                                <span>{{ $t("facial_information") }}</span>
                                <i class="arrow-right"></i>
                            </div>
                        </router-link>
                    </ul>
                    <ul class="module-list-05 white-bg margin-top10 bottom-shadow clearfix">
                        <router-link tag="li" to="/mall/ConvertibleRecord" v-if="isMeInd == true">
                            <em class="iconfont icon-zhuanjiaojilubiao"></em>
                            <div class="title-01">
                                <span>{{ $t("point_redemption_record") }}</span><!--积分兑换记录-->
                                <i class="arrow-right"></i>
                            </div>
                        </router-link>
                        <li v-if="isMeInd == true" @click="selectLan = true">
                            <em class="iconfont icon-language">
                            <i></i>
                            </em>
                            <div class="title-01">
                                <span>{{ $t("set_lan") }}</span><!--多语言-->
                                <i class="arrow-right"></i>
                            </div>
                        </li>
                    </ul>
                    <!--其他页面入口 end-->
                    <!--暂无数据-->
                    <div class="white-bg" style="height:300px;" v-if="isMeInd == false && personal.snsSetting  && ((personal.snsSetting.s_set_my_credit === 2 && personal.snsSetting.s_set_my_collection === 2 && personal.snsSetting.s_set_group === 2 && personal.snsSetting.s_set_my_credit_exchange === 2 && personal.snsSetting.s_set_my_learning_record === 2) || (personal.snsSetting.s_set_my_credit === 1 && personal.snsSetting.s_set_my_collection === 1 && personal.snsSetting.s_set_group === 1 && personal.snsSetting.s_set_my_credit_exchange === 1 && personal.snsSetting.s_set_my_learning_record === 1 && personal.snsSetting.s_set_my_files === 1 && personal.snsSetting.s_set_my_learning_situation === 1 && snsAttentionId === false))">
                        <div class="box-table" style="width:100%;height:100%;">
                            <div class="box-table-cell" style="text-align: center;">
                                <div class="no-data">
                                    <img src="../../../static/images/no-data.png" alt=""/>
                                    <p class="color999">{{ $t('personal_info_is_not_visible') }}</p><!--该用户设置了信息不可见-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-pull-refresh>
        </div>
        <!--内容 end-->
        <bottom-navigation v-if="isMeInd == true && isMyPersonal == true" :active=3></bottom-navigation>
        <!--发送站内信-->
        <div class="selected-user" v-if="isShowSendMessage" style="background: #eff1f4;">
            <div class="layer-header-box white-bg">
                <span class="icon-back" @click="closeSendMessage()"></span>
                {{ $t("message_msg_title") }}<!--发送站内信-->
                <span class="font-size15 write-btn-right" v-if="wmsg_subject == '' || wmsg_content == ''">{{ $t("message_send") }}</span><!--发送-->
                <span class="font-size15 write-btn-right cur" v-if="wmsg_subject != '' && wmsg_content != ''" @click="submit(personal.usrEntId)">{{ $t("message_send") }}</span><!--发送-->
            </div>
            <div style="height: calc(100% - 100px);" class="body-content">
                <div class="layer-content-box">
                    <div class="add-contents-box">
                        <p class="word-title-06">{{ $t("message_subject") }}</p><!--消息标题-->
                        <div class="white-bg bottom-shadow"><!--输入标题内容...-->
                            <textarea v-validate="'tipsTitle'" name="tipsTitle" :placeholder="$t('message_subject_tips')" style="height: 40px;" v-model="wmsg_subject"></textarea>
                            <p class="font-size11 colorfd3 warning-red-tan warning" v-if="errors.has('tipsTitle')">{{ $t('exceeded_word_range_tips', {'value': '200'}) }}</p><!--已超出200中文范围-->
                        </div>
                        <p class="word-title-06">{{ $t("message_content") }}</p><!--消息描述-->
                        <div class="white-bg bottom-shadow"><!--输入描述内容...-->
                            <textarea v-validate="'tipsDetail'" name="tipsDetail" :placeholder="$t('message_content_tips')" v-model="wmsg_content"></textarea>
                            <p class="font-size11 colorfd3 warning-red-tan warning" v-if="errors.has('tipsDetail')">{{ $t('exceeded_word_range_tips', {'value': '1000'}) }}</p><!--已超出1000中文范围-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
        <div class="selectPopup" v-if="selectLan">
            <div class="selectPopup-body">
                <div class="close-box clearfix" @click="selectLan = false"><i class="close-icon-02"></i></div>
                <p style="margin-bottom: 20px;">{{ $t("set_lan_title") }}</p><!--根据您的偏好设置语言-->
                <div class="select-box">
                    <p @click="selectedLanguage('cn')">中文（简体）</p>
                    <p class="color999" v-if="selectTitle == 'cn'">{{ $t("set_lan_tips") }}</p><!--界面目前使用的是这种语言-->
                </div>
                <div class="select-box">
                    <p @click="selectedLanguage('hk')">中文（繁體）</p>
                    <p class="color999" v-if="selectTitle == 'hk'">{{ $t("set_lan_tips") }}</p>
                </div>
                <div class="select-box">
                    <p @click="selectedLanguage('en')">English</p>
                    <p class="color999" v-if="selectTitle == 'en'">{{ $t("set_lan_tips") }}</p>
                </div>
            </div>
        </div>
        <!--tip--><!--确定--><!--取消-->
        <van-dialog
            v-model="leaveHint"
            show-cancel-button
            :title="$t('confirm_exit_1')"
            :message="$t('confirm_exit_content_1')"
            :cancelButtonText="$t('cancel')"
            :confirm-button-text="$t('sure')"
            @confirm="isShowSendMessage = false"
            >
        </van-dialog>
        <!-- 切换到培训管理员角色 -->
        <van-dialog
            v-model="roleHint"
            show-cancel-button
            :showConfirmButton=false
            :cancelButtonText="$t('cancel')"
            >
            <p style="font-size: 14px;text-align: center;">{{ $t('click_check_role') }}</p>
            <p @click="changeRoleModal(true)" class="rolr-list-box">{{ $t('training_administrator') }}</p>
        </van-dialog>
    </div>
</template>

<script>
import CommonLoading from '@/components/common/loading';
import SignInDate from './SignInDate';
import HeadImg from './HeadImg';
import {fmtHours, cwnEncrypt, cwnDecrypt} from '@/utils/tools';
export default {
    name: 'Personal',
    data() {
        return {
            selectLan: false,
            selectTitle: 'cn',
            activeRank: 0,
            locale: {
                'en': 'en-US',
                'cn': 'zh-CN',
                'hk': 'zh-TW'
            },
            token: window.localStorage.getItem('token'),
            mesNum: 0, //消息
            personal: {}, //用户信息
            learningSituation: {},
            countNum: {},
            //snsSetting: {}, //权限设置
            snsAttentionId: false,
            encId: '', //获取用户id
            loginUserIdwb: '', //登录用户id
            loginUserId: '',
            isMeInd: false, //用户id和登录用户id不一致
            isMyPersonal: false,
            isShowSendMessage: false, //发送站内信弹出层
            wmsg_subject: '', //发送站内信标题
            wmsg_content: '', //发送站内信描述内容
            leaveHint: false, //离开提示
            isLoading: true,
            goSignInPop: false, //签到成功后弹出详细信息层
            isSignIn: false, //是否可以签到
            isCurrentSignIn: false, //今天是否已签到
            userEntId: '', //用户entId
            medalList: [], //勋章数据
            notCount: 0, //代办事项数
            learnedList: [], //学习排行榜
            courseList: [], //课程排行榜
            userStudyInfo: {
                completeTotal: 0,
                timeTotal: 0.0,
                creditsTotal: 0
            },
            facialSwitch: false, //人脸开关
            userinfo: localStorage.getItem('loginUser'),
            userRoleList: [],
            showCheckRole: false, // 是否展示切换管理员图标
            roleHint: false,
            isRefresh: false,
            isDisabledPull: false
        };
    },
    components: {
        HeadImg,
        SignInDate,
        CommonLoading
    },
    methods: {
        ...{fmtHours, cwnEncrypt, cwnDecrypt},
        goToPkBorad() {
            if (process.env.NODE_ENV === 'production_app') {
                if (window.plus) {
                    var ws = window.plus.webview.currentWebview();
                    var embed = window.plus.webview.create(this.appUrl + `/app/pk-trainee/index.html?token=${this.token}#/pk/borad?lang=${this.locale[this.$i18n.locale]}`);
                    ws.append(embed);
                } else {
                    document.addEventListener('plusready', function() {
                        this.isAPP = true;
                        var ws = window.plus.webview.currentWebview();
                        var embed = window.plus.webview.create(this.appUrl + `/app/pk-trainee/index.html?token=${this.token}#/pk/borad?lang=${this.locale[this.$i18n.locale]}`);
                        ws.append(embed);
                    }, false);
                }
            } else {
                this.$router.push('/pk/borad');
            }
        },
        toPath(path) {
            this.$router.push({ path: path });
        },
        getRanking() {
            if (this.isMeInd) {
                this.$axios.get('/app/fame/learned', {params: {pageSize: 5}}).then(res => {
                    if (res.data && res.data.results && res.data.results.length > 0) {
                        if (res.data.results.length > 5) {
                            this.learnedList = res.data.results.slice(0, 5);
                        } else {
                            this.learnedList = res.data.results;
                        }
                    }
                });
                this.$axios.get('/app/fame/course', {params: {pageSize: 5}}).then(res => {
                    if (res.data && res.data.results && res.data.results.length > 0) {
                        if (res.data.results.length > 5) {
                            this.courseList = res.data.results.slice(0, 5);
                        } else {
                            this.courseList = res.data.results;
                        }
                    }
                });
                this.$axios.get('/app/fame/learned/detail-pos').then(res => {
                    if (res.data) {
                        this.userStudyInfo.learnedIndex = res.data.index ? res.data.index : '--';
                        this.userStudyInfo.learnDuration = (res.data.lsLearnDuration / 60 / 60).toFixed(1);
                    }
                });
                this.$axios.get('/app/fame/credit/detail-pos').then(res => {
                    if (res.data) {
                        this.userStudyInfo.creditIndex = res.data.index ? res.data.index : '--';
                        this.userStudyInfo.creditTotal = res.data.uctTotal;
                    }
                });
            }
            this.$axios.get(`/app/fame/info/${this.wbDecryption(this.$route.params.encId)}`).then(res => {
                if (res.data) {
                    this.userStudyInfo.timeTotal = res.data.timeTotal;
                    this.userStudyInfo.completeTotal = res.data.completeTotal;
                    this.userStudyInfo.creditsTotal = res.data.creditsTotal;
                }
            });
        },
        /**
         * 查询待办事件数
         */
        getNotShiJian() {
            if (this.isMeInd) {
                this.$axios.get('/app/api/trainee/home/messgae/count?isMobile=1').then(res => {
                    if (res) {
                        this.notCount = res.data.announceCount + res.data.approvalCount + res.data.evaluationCount + res.data.messageCount + res.data.inviteCount + res.data.leaveCount;
                    }
                });
            }
        },
        /**
         * 当天是否签到过
         */
        isCurrentDayUserSignIn() {
            if (this.userEntId) {
                this.$axios.get(`/app/sign-in/${this.userEntId}`).then((res) => {
                    this.isSignIn = res.data.isSignIn;
                    this.isCurrentSignIn = res.data.isCurrentSignIn;
                });
            }
        },
        /**
         * 签到
         */
        goSignInBtn() {
            if (this.userEntId) {
                if (this.isCurrentSignIn) {
                    this.goSignInPop = true;
                    this.isDisabledPull = true;
                    return;
                }
                this.$axios.post(`/app/sign-in/${this.userEntId}`).then((res) => {
                    this.goSignInPop = true;
                    this.isCurrentSignIn = true;
                    this.isDisabledPull = true;
                }).catch((res) => {
                    this.goSignInPop = true;
                    this.isDisabledPull = true;
                });
            }
        },
        closeSignModal() {
            this.goSignInPop = false;
            this.isDisabledPull = false;
        },
        init(option) {
            if (option && option === 'init') {
                this.personal = {};
                this.mesNum = {};
                this.learningSituation = {};
                this.countNum = {};
                this.snsAttentionId = false;
                this.encId = '';
                this.loginUserIdwb = '';
                this.loginUserId = '';
                this.isMeInd = false;
                this.isMyPersonal = false;
                this.isShowSendMessage = false;
                this.wmsg_subject = '';
                this.wmsg_content = '';
                this.leaveHint = false;
                this.isLoading = true;
                this.goSignInPop = false;
                this.isDisabledPull = false;
                this.isSignIn = false;
                this.isCurrentSignIn = false;
                this.userEntId = '';
                this.notCount = 0; //代办事项数
                this.learnedList = []; //学习排行榜
                this.courseList = []; //课程排行榜
                this.userStudyInfo = {
                    completeTotal: 0,
                    timeTotal: 0.0,
                    creditsTotal: 0
                };
            }
            this.onScroll();
            const userinfo = localStorage.getItem('loginUser');
            console.log(userinfo, 'userinfo');
            console.log(this.cwnDecrypt(this.$route.params.encId), 'userinfo');

            if (Number(userinfo) !== Number(this.cwnDecrypt(this.$route.params.encId))) {
                this.getUserDetail();
            } else {
                this.getPersonal();
            }
            this.getMineMedal();
            //消息提醒
            this.$axios({
                method: 'GET',
                url: '/app/api/trainee/home/top/count',
                params: {
                    isMobile: '1'
                }
            }).then((res) => {
                this.mesNum = res.data.unreadWebMessage;
            });
            this.encId = this.$route.params.encId; //用户id
            this.loginUserIdwb = this.wbEncryptor(window.localStorage.getItem('loginUser')); //用户登录id
            this.loginUserId = window.localStorage.getItem('loginUser');
            if (this.encId === this.loginUserIdwb || this.encId === this.loginUserId) {
                this.isMeInd = true;
            }
            if (this.encId === this.loginUserIdwb) {
                this.isMyPersonal = true;
            }
            this.getNotShiJian();
            this.getRanking();
            // 查看人脸总开关是否开启
            this.getUserFaceSwitch();
            this.getUserRoleInfo();
        },
        getUserRoleInfo() {
            this.$axios({
                method: 'GET',
                url: '/app/api/user/current'
            }).then(res => {
                window.localStorage.setItem('currentRole', res.data.roleList[0].id);
                res.data.roleList.forEach(item => {
                    if (item.id === 'TADM_1') {
                        this.userRoleList = [item];
                        this.showCheckRole = true;
                    }
                });
            });
        },
        // 弹出切换培训管理端弹框或者切换管理员逻辑处理
        changeRoleModal(flag) {
            if (flag) {
                this.$axios({
                    method: 'GET',
                    url: '/app/api/role/change-role',
                    params: {
                        roleExtId: this.userRoleList[0].id
                    }
                }).then(res => {
                    if (res.data) {
                        window.localStorage.setItem('currentRole', res.data.currentRole);
                        this.roleHint = false;
                        this.$router.push('/workbenches');
                    }
                });
            } else {
                this.roleHint = true;
            }
        },
        getUserFaceSwitch() {
            this.$axios({
                method: 'GET',
                url: '/app/api/trainee/system-setting/getUserFaceSwitch'
            }).then(res => {
                this.facialSwitch = res.data;
            });
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.getPersonal();
                this.isRefresh = false;
            }, 900);
        },
        // 获取他人信息
        getUserDetail() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/my/userDetail/` + this.cwnDecrypt(this.$route.params.encId)
            }).then(res => {
                this.isTop = true;
                this.personal = res.data;
                if (this.personal.snsSetting && this.personal.snsSetting.snsAttention && this.personal.snsSetting.snsAttention.s_att_id) {
                    this.snsAttentionId = true;
                } else {
                    this.snsAttentionId = false;
                }
            });
        },
        getPersonal() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/my/detail`
            }).then(res => {
                this.isTop = true;
                this.personal = res.data;
                if (this.personal.snsSetting && this.personal.snsSetting.snsAttention && this.personal.snsSetting.snsAttention.s_att_id) {
                    this.snsAttentionId = true;
                } else {
                    this.snsAttentionId = false;
                }
            });
        },
        onScroll(event) {
            let position = 0;
            if (event) {
                position = event.target.scrollTop;
            }
            if (this.$refs.orderFullScreen02) {
                if (position > 10) {
                    this.$refs.orderFullScreen02.$el.style.opacity = '0';
                } else {
                    this.$refs.orderFullScreen02.$el.style.opacity = '1';
                }
            }
            // console.log('position', position, this.$refs.orderFullScreen02);

            this.$refs.orderFullScreen.$el.style.opacity = position / 100;
        },
        TimeConversion(time) {
            time = time / 60 / 60;
            return time;
        },
        //返回
        back() {
            this.$store.commit('removeKeepAliveList', 'Personal');
            this.$router.go(-1);
        },
        //关注，取消关注
        changeAttention() {
            let attentUrl = '';
            if (this.personal.regUser.snsAttention !== undefined && this.personal.regUser.snsAttention.s_att_target_uid !== undefined && this.personal.regUser.snsAttention.s_att_source_uid !== 0) {
                attentUrl = `/app/personal/cancelAttention/${this.$route.params.encId}`;
                this.$toast(this.$t('attend_cancel'));
            } else {
                attentUrl = `/app/personal/addAttention/${this.$route.params.encId}`;
                this.$toast(this.$t('attend_success'));
            }
            this.$axios({
                method: 'POST',
                url: attentUrl
            }).then(res => {
                this.personal = {};
                this.getPersonal();
            });
        },
        //发送站内信
        sendMessage() {
            this.isShowSendMessage = true;
            this.wmsg_subject = ''; //发送站内信标题
            this.wmsg_content = ''; //发送站内信描述内容
        },
        closeSendMessage() {
            if (this.wmsg_subject === '' && this.wmsg_content === '') {
                this.isShowSendMessage = false;
            } else {
                this.leaveHint = true;
            }
        },
        submit(id) {
            this.$validator.validate().then(res => {
                if (res) {
                    this.userId = id;
                    let formData = new FormData();
                    formData.append('wmsg_subject', this.wmsg_subject);
                    formData.append('wmsg_content', this.wmsg_content);
                    this.$axios({
                        method: 'POST',
                        url: '/app/subordinate/sendWebMessage/' + this.userId,
                        data: formData
                    }).then(res => {
                        this.$toast(this.$t('send_ok'));
                    });
                };
            });
        },
        jumpMyAnswer() {
            this.$store.commit('removeKeepAliveList', 'KnowIndex');
            this.$router.push({name: 'myAnswer'});
        },
        //跳转勋章管理页面
        toMedalManagement() {
            if (this.isMyPersonal) {
                this.$router.push({path: `/medalManagement/${this.encId}`, query: {}});
            }
        },
        /**
         * 获取设置的勋章
         */
        getMineMedal() {
            this.$axios({
                method: 'GET',
                url: `/app/medal/personnel`
            }).then(res => {
                this.medalList = res.data;
            });
        },
        /**
         * @description: 跳转排行榜更多
         * @param {*}
         * @return {*}
         */
        goLearnMore() {
            if (this.activeRank === 0) {
                this.$router.push('/courseLeaderboard');
            } else if (this.activeRank === 1) {
                this.$router.push(`/learningSituation/${this.$route.params.encId}`);
            }
        },
        selectedLanguage(type) {
            let oldLan = type;
            let newLan;
            //替换（newLan）字符后到后台请求切换语言
            if (type === 'cn') {
                newLan = 'zh-cn';
            }
            if (type === 'hk') {
                newLan = 'zh-hk';
            }
            if (type === 'en') {
                newLan = 'en-us';
            }
            this.changeLanguage(oldLan, newLan);
        },
        changeLanguage(oldLan, newLan) {
            this.$axios({
                method: 'get',
                url: '/app/api/user/current?lang=' + newLan
            }).then(res => {
                if (res) {
                    this.$i18n.locale = oldLan;
                    this.type = oldLan;
                    this.selectTitle = oldLan;
                    window.localStorage.setItem('globalLang', oldLan);
                    this.selectLan = false;
                    this.$toast(this.$t('lab_switched_success'));
                    this.$store.commit('clearKeepAliveList');
                }
            });
        }
    },
    mounted() {
        let dom = document.getElementsByClassName('van-pull-refresh')[0];

        dom.addEventListener('scroll', this.onScroll);
        // this.$store.commit('addKeepAliveList', 'Personal');
        this.selectTitle = this.$i18n.locale;
        this.init();
    },
    beforeDestroy() {
        let dom = document.getElementsByClassName('van-pull-refresh')[0];
        dom.removeEventListener('scroll', this.onScroll);
    },
    watch: {
        personal() {
            if (JSON.stringify(this.personal) !== '{}') {
                this.isLoading = false;
            }
        }
    },
    activated() {
        this.init();
    },
    created() {
        this.userEntId = localStorage.getItem('loginUser');
        this.isCurrentDayUserSignIn();
        this.$Validator.extend('tipsTitle', {
            validate(value) {
                let num = 0;
                for (let i = 0; i < value.length; i++) {
                    if (value.charCodeAt(i) > 127 || value.charCodeAt(i) === 94) {
                        num += 2;
                    } else {
                        num += 1;
                    }
                }
                if (num > 400) {
                    return false;
                } else {
                    return true;
                }
            }
        });
        this.$Validator.extend('tipsDetail', {
            validate(value) {
                let num = 0;
                for (let i = 0; i < value.length; i++) {
                    if (value.charCodeAt(i) > 127 || value.charCodeAt(i) === 94) {
                        num += 2;
                    } else {
                        num += 1;
                    }
                }
                if (num > 2000) {
                    return false;
                } else {
                    return true;
                }
            }
        });
    },
    beforeRouteEnter(to, from, next) {
        next(_this => {
            if (_this.$route.params.encId === window.localStorage.getItem('loginUser') ||
                _this.$route.params.encId === _this.wbEncryptor(window.localStorage.getItem('loginUser'))) {
            } else {
                _this.init('init');
            }
        });
    }
};
</script>

<style scoped lang="less">
    /deep/.van-toast--top{
        top: 6%;
    }
    /deep/.van-dialog__content{
        padding: 23px;
    }
    .head-icon {
        font-size: 25px;
        margin: -3px 0 0 11px;
    }
    /deep/.van-nav-bar .van-icon {
        color:#ffffff;
        font-size: 20px;
    }
    .icon-color-white {
        color: white !important;
    }
    .icon-color-black {
        color: #000 !important;
    }
    .head-icon-badge {
        &:after {
            content: '';
            width: 5px;
            height: 5px;
            background: red;
            border-radius: 50%;
            position: absolute;
            right: 8px;
            top: 16px;
        }
    }
    .my-data-info {
        width: 100%;
        /*border: 1px red solid;*/
        height: 160px;
        position: absolute;
        bottom: -90px;
        z-index: 99;
        .data-info-box {
            padding: 0 15px;
            .data-info-grid {
                // display: grid;
                // grid-template-columns: 1fr 1fr 1fr;
                // grid-auto-rows: 50px 50px 50px;
                // grid-column-gap: 10px;
                // margin-bottom: 10px;
                display: block;
                margin-bottom: 10px;
                &>div {
                    background: #fff;
                    border-radius: 5px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14px;
                    width: 31%;
                    float: left;
                    height: 50px;
                    &>i {
                        margin-right: 10px;
                        font-size: 24px;
                    }
                }
                .data-dbsx {
                    position: relative;
                    .data-badge {
                        position: absolute;
                        right: -5px;
                        top: -5px;
                        background: red;
                        color: #fff;
                        font-size: 8px;
                        padding: 3px 7px;
                        border-radius: 10px;
                    }
                }
            }
            .data-num {
                border-radius: 5px;
                background: #fff;
                height: 100px;
                // display: grid;
                // grid-template-columns: 1fr 1fr 1fr;
                &>div {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 100%;
                    width: 33.3%;
                    float: left;
                    &>div {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        width: 100%;
                        &>div:first-child {
                            margin-bottom: 10px;
                            font-size: 20px;
                        }
                        &>div:last-child {
                            font-size: 14px;
                            color: #9D9D9D;
                        }
                    }
                    &:not(:last-child):after {
                        content: '';
                        width: 1px;
                        height: 40px;
                        background: #EFEFEF;
                        display: inline-block;

                    }
                }
            }
        }
    }
    .rank-box{
      padding: 100px 0 0;
      margin: 0 15px;
      position:relative;
      .rank-more{
        position: absolute;
        right: 0;
        z-index: 10;
        line-height: 44px;
        padding: 0 15px;
      }
      .rank-list{
        z-index: 9;
        min-height: 100px;
        border-radius: 5px;
        overflow: hidden;
        /deep/.van-tabs__wrap{
          padding: 0 15px;
          background: #fff;
        }
        /deep/.van-tab{
          margin-right: 10px;
          flex: inherit;
          flex-wrap: wrap;
          justify-content: flex-start;
          color: #999;
        }
        /deep/.van-tab--active{
          color: #333;
        }
        /deep/.van-tabs__line{
          bottom: 22px;
          background-color: #075ebb;
          height: 5px;
          border-radius: 10px;
        }
        .top-body{
          background: #ffffff;
          padding-bottom: 10px;
          .top-info{
            display: flex;
            padding: 5px 15px;
            height: 24px;
            line-height: 24px;
            .rank_head {
              color: #999;
            }
            .rank_index{
              width: 12%;
              line-height: 24px;
              text-align: center;
              span{
                margin: 0 auto;
                display: block;
                line-height: 24px;
                width: 24px;
                height: 24px;
                background: #eeeeee;
                color: #999;
                &.top{
                  background: #F7CED4;
                  color: #075ebb;
                }
              }
            }
            .rank_title{
              width: 56%;
              margin: 0 2%;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
            .rank_count{
              text-align: right;
              width: 30%;
            }
          }
        }
      }
    }
    .icon {
        font-size: 20px;
        color: #fff;
        position: relative;
        right: 0;
        bottom: 0;
    }
    .sign-in-point {
        width: 30%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 5px;
        .go-sign-in {
            border: 1px #f8bc3a solid;
            color: #f8bc3a;
            padding: 0 5px;
            height: 30px;
            border-radius: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .pic-module-01 {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .pic-box {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .module-box-04 {
        padding: 3px 15px 0 99px;
        margin-bottom: 30px;
    }
    .user-pic-02 {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        margin-left: -84px;
        float: left;
    }
    .user-pic-02 img {
        border: 1px solid #ffffff;
        border-radius: 50%;
    }
    .title-03 {
        font-size: 18px;
        color: #ffffff;
        margin: 5px 0 10px 0;
    }
    .others-icon-box {
        float: right;
        margin-right: -130px;
        margin-top: 8px;
        span {
            display: inline-block;
            width: 40px;
            height: 30px;
            background: #2e4f94;
            border-radius: 4px;
        }
    }
    .atten-icon:before {
        content: "";
        float: left;
        width: 17px;
        height: 19px;
        background: url(./images/others-icon.png) no-repeat 0 -6px;
        background-size: 16px;
        margin: 5px 12px;
    }
    .atten-icon.cur-icon:before {
        content: "";
        background-position: 0 -37px;
    }
    .atten-icon.each-icon:before {
        content: "";
        background-position: 0 -68px;
    }
    .email-icon:before {
        content: "";
        float: left;
        width: 17px;
        height: 19px;
        background: url(./images/others-icon.png) no-repeat 0 -98px;
        background-size: 16px;
        margin: 5px 12px;
    }
    .module-list-04 ul li {
        width: calc((100% - 2px) / 3);
        box-sizing: border-box;
        float: left;
        font-size: 12px;
        text-align: center;
        color: #ffffff;
    }
    .module-list-04 ul i {
        float: left;
        height: 8px;
        border-right: 1px solid #a1b3d9;
        margin-top: 6px;
    }
    .num-04 {
        color: #ffffff;
        font-size: 16px;
        margin-left: 5px;
    }
    .module-box-05 {
        margin-top: -38px;
    }
    .module-box-05 .weui-panel {
        margin-top: 0;
    }
    .card-flex {
        display: flex;
    }
    .card-flex .card-box {
        flex: 1;
        text-align: center;
        color: #999999;
        border-right: 1px solid #cccccc;
        padding: 0 4px;
    }
    .card-flex .card-box:nth-last-child(1) {
        border-right: 0;
    }
    .card-flex .card-box div {
        font-size: 18px;
        color: #1a1a1a;
        line-height: 26px;
        padding: 20px 0 0;
    }
    .card-flex .card-box p {
        padding: 0 0 20px 0;
    }
    .module-list-05{
      margin: 15px;
      border-radius: 5px;
    }
    .module-list-05 li {
        padding: 0 15px 0 59px;
        height: 60px;
        line-height: 60px;
        font-size: 16px;
    }
    .module-list-05 li em {
        float: left;
        margin: 16px 0 0 -44px;
        width: 30px;
        height: 30px;
        background: #eeeeee;
        border-radius: 50%;
        line-height: 30px;
        text-align: center;
    }
    .arrow-right {
        margin-top: 23px;
    }
    .message-num {
        margin-top: 20px;
    }
    .icon-schedule:before, .icon-activity-credits:before, .icon-offline-learning:before, .icon-collection:before, .icon-approval:before, .icon-grade:before, .icon-badge:before, .icon-certificate:before, .icon-footprint:before, .icon-vote:before, .icon-survey:before, .icon-group:before, .icon-answer:before, .icon-knowledge:before, .icon-point:before, .icon-learning-record:before {
        content:"";
        width: 20px;
        height: 20px;
        float: left;
        background: url(./images/icon-03.png) no-repeat 2px -46px;
        background-size: 16px;
        margin: 4px 0 0 5px;
    }
    .icon-activity-credits:before {
        background-position: 2px -327px;
    }
    .icon-offline-learning:before {
        background-position: 2px 0;
    }
    .icon-collection:before {
        background-position: 2px -22px;
    }
    .icon-approval:before {
        background-position: 2px -70px;
    }
    .icon-grade:before {
        background-position: 2px -94px;
    }
    .icon-badge:before {
        background-position: 2px -118px;
    }
    .icon-certificate:before {
        background-position: 2px -142px;
    }
    .icon-footprint:before {
        background-position: 2px -166px;
    }
    .icon-vote:before {
        background-position: 3px -190px;
    }
    .icon-survey:before {
        background-position: 2px -213px;
    }
    .icon-group:before {
        background-position: 2px -234px;
    }
    .icon-answer:before {
        background-position: 2px -256px;
    }
    .icon-knowledge:before {
        background-position: 2px -281px;
    }
    .icon-point:before {
        background-position: 2px -305px;
    }
    .icon-learning-record:before {
        background-position: 3px -347px;
    }
    .box-04 {
        float: right;
        text-align: center;
        line-height: 20px;
        padding: 10px 0 0 25px;
    }
    .box-04 i {
        font-size: 16px;
        color: #075ebb;
    }
    .box-04 p {
        font-size: 12px;
        color: #999999;
    }
    .box-04.order i{
        color: #ff7e3b;
    }
    .medal{
      display: flex;
      flex-wrap: nowrap;
      .medal-item{
        padding-right: 6px;
        margin-top: 5px;
        width: 20%;
        img{
          padding-right: 5px;
          width: 20px;
          height: 20px;
        }
      }
    }
    .module-list-05 li em.icon-language{

    }
    .module-list-05 li em.icon-language i{
      background: url('./images/language.png') no-repeat center center;
      background-size: 16px;
      width: 16px;
      height: 16px;
      display: block;
      margin: 0 auto;
      position: relative;
      top: 50%;
      margin-top: -8px;
    }
    .header-title-01 {
        background: #4267B2;
    }
    .rolr-list-box{
        text-align:center;
        font-size: 18px;
        color: #075ebb;
        margin-top: 20px;
    }
</style>
